<!DOCTYPE html>
<html>
    <head>
        <title>CSS Test: CSS3 text-decoration-color repaint</title>
        <meta name="flags" content="ahem"/>
        <script>
            if (window.testRunner)
                testRunner.dumpAsText();
        </script>
        <script>
            function runRepaintTest() {
                document.getElementById("test-underline").style.textDecorationColor = 'gray';
                document.getElementById("test-overline").style.textDecorationColor = 'yellow';
                document.getElementById("test-line-through").style.textDecorationColor = 'white';
                document.getElementById("test-parent").style.textDecorationColor = 'green';
                document.getElementById("test-ancestor-1").style.textDecorationColor = 'black';
                document.getElementById("test-ancestor-2").style.textDecorationColor = 'inherit';
                document.getElementById("test-mixed-1").style.textDecorationColor = 'black';
                document.getElementById("test-mixed-2").style.textDecorationColor = 'green';
                document.getElementById("test-mixed-3").style.textDecorationColor = 'blue';
            }
        </script>
        <style>
            .underline {
                text-decoration: underline;
            }
            .overline {
                text-decoration: overline;
            }
            .line-through {
                text-decoration: line-through;
            }
        </style>
    </head>
    <body onload="runRepaintTest();" style="font: 10px Ahem; -webkit-font-smoothing: none;">
        <!-- Green text with gray underline on repaint -->
        <p><span class="underline" id="test-underline" style="color: green;">lorem ipsum <sub>ipsum</sub> <sup>ipsum</sup></span></p>

        <!-- Navy text with yellow overline on repaint -->
        <p><span class="overline" id="test-overline" style="color: navy;">lorem ipsum <sub>ipsum</sub> <sup>ipsum</sup></span></p>

        <!-- Black text with white line-through on repaint -->
        <p><span class="line-through" id="test-line-through" style="color: black;">lorem ipsum <sub>ipsum</sub> <sup>ipsum</sup></span></p>

        <!-- Parent color is grey, with green underline, first ancestor has black overline and latter has inherited text decoration color from parent on repaint -->
        <p><span class="underline" id="test-parent" style="color: rgb(100, 100, 100);">lorem <span class="overline" id="test-ancestor-1">ipsum</span> <span class="line-through" id="test-ancestor-2">ipsum</span> ipsum</span></p>

        <!-- Transparent text with green overline, blue line-through and black underline on repaint -->
        <p style="color: transparent;"><span id="test-mixed-1" class="underline"><span id="test-mixed-2" class="overline"><span id="test-mixed-3" class="line-through">lorem ipsum</span></span></span></p>
    </body>
</html>
